/************************************************************
 This file contains all of the CSS that is shared by the
 various game screens and elements.
 ************************************************************/

 @font-face {
    font-family: 'Open Sans';
    src: url("../fonts/OpenSans-VariableFont.ttf") format('truetype supports variations'),
    url("../fonts/OpenSans-VariableFont.ttf") format('truetype-variations');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url("../fonts/OpenSans-Italic-VariableFont.ttf") format('truetype supports variations'),
    url("../fonts/OpenSans-Italic-VariableFont.ttf") format('truetype-variations');
    font-style: italic;
    font-display: swap;
}

html {
    width: 100%;
    height: 100%;
    font-size: 10px;
    touch-action: manipulation;
}

:root {
    --base-font-weight: 500;
    --medium-font-weight: calc(var(--base-font-weight) + 100);
    --base-font-stretch: 100%;
    --arrow-location: 50%;
}

body {
    color: #050505;
    background-color: #050505;
    font-size: 1.4em;
    font-family: 'Open Sans', "Trebuchet MS", Helvetica, sans-serif;
    background-size: contain;
    /* Sensible initial value */
    background-position: center center;
    background-repeat: repeat-x;
    overflow: hidden;
    font-weight: var(--base-font-weight);
    font-stretch: var(--base-font-stretch);
}

button,
input,
textarea,
select {
    pointer-events: auto;
    touch-action: pan-y;
}

button>* {
    pointer-events: none;
}

/************************************************************
 * Bootstrap overrides.
 ************************************************************/

* {
    box-sizing: border-box;
}

table {
    border-collapse: initial;
}

body.modal-open {
    margin-left: 0;
}

.pagination {
    margin: 0.5rem 0;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
    border-bottom-left-radius: 0.4rem;
    border-top-left-radius: 0.4rem;
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
    border-bottom-right-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
}

p {
    margin: 0 0 1rem;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
    margin-bottom: 0.7em;
    margin-top: 0.7em;
}

h5 {
    font-size: 1em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

ul {
    padding-left: 2em;
}

label,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: var(--medium-font-weight);
}

.glyphicon {
    top: 0.1rem;
}

.tooltip {
    font-size: 1.2rem;
}
.tooltip-inner {
    border-radius: 0.4rem;
    padding: 0.3rem 0.8rem;
    max-width: 20rem;
}

.form-control {
    font-size: 1.4rem;
    height: 3.4rem;
    padding: 0.6rem 1.2rem;
}

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

/************************************************************
 * Global style classes.
 ************************************************************/

.bordered {
    border: 0.2rem solid #111111;
    border-radius: 0.5rem;
    padding: 0;
}

/************************************************************
 * Classes for dialogue bubble color schemes.
 *
 * These are defined as sets of CSS variables, since these colors
 * may be referenced in more than one place.
 ************************************************************/

/* Default color scheme. */
:root {
    --dialogue-background-color: #F5F5F5;
    --dialogue-text-color: black;

    --loser-label-color: #dd4444;
    --tied-label-color: #cccc44;
    --current-label-color: #63aae7;
}

.dark-mode {
    --dialogue-background-color: rgba(10, 10, 10, 0.5);
    --dialogue-text-color: #fffdea;

    --loser-label-color: hsla(0, 69%, 50%, 0.75);
    --tied-label-color: rgba(204, 204, 68, 0.75);
    --current-label-color: hsla(208, 73%, 60%, 0.75);
}

/************************************************************
 * Screen classes.
 ************************************************************/

.screen-container {
    position: absolute;
    width: 100vw;
    height: 75vw;
    max-width: 133.33vh;
    max-height: 100vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.wide-screen-container {
    position: absolute;
    width: 100vw;
    height: 56.25vw;
    max-width: 177.78vh;
    max-height: 100vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}


.screen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    margin: 0.5%;
    pointer-events: none;
}

.screen>* {
    pointer-events: initial;
}

.select-table>*,
#game-table>*,
#game-hidden-area>*,
#player-name-label-minimal,
.table-bug-report-button,
.hide-table-button,
.table-hard-refresh-button,
.collectible-button-container {
    z-index: 1000;
}

.table-feedback-report-button {
    z-index: 1001;
}

.game-table,
.game-ui {
    transition-property: opacity;
    transition-duration: 100ms;
}
.game-table.fade-out,
.game-ui.fade-out
{
    opacity: 0;
    pointer-events: none;
}
.fade-out *
{
    pointer-events: none;
}

/**************************************************
 * Background / foreground positioning.
 **************************************************/

.bg-image-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

.bg-image {
    position: absolute;
    height: 75vw;
    max-height: 100vh;
    width: calc((100% - 133.33vh) / 2);
    background-repeat: repeat-x;
}

.bg-image.center {
    width: 100vw;
    max-width: 133.33vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-position-x: center;
}

.bg-image.left {
    left: 0;
    background-position-x: right;
}

.bg-image.right {
    right: 0;
    background-position-x: left;
}

.bg-image.whole {
    max-height: none;
    max-width: none;
    height: 100%;
    width: 100%;
    background-position: center center;
}

/* Default background image prior to loading backgrounds.xml */
#bg-back .whole {
    background-image: url("../img/backgrounds/inventory.png");
}

/* Hide left- and right-anchored background layers on narrow screens. */
@media (max-aspect-ratio: 3/2) {
    .bg-image.left, .bg-image.right {
        display: none;
    }
}

/* From bottom to top:
 * - Background layers
 * - Screens with characters (title screen, game screen, main select screen, group select screen)
 * - Foreground layers
 * - Other screens
 * - Modals
 */

.screen-container, .wide-screen-container, #epilogue-screen {
    z-index: 3;
}

#title-screen, #main-select-screen, #group-select-screen, #game-screen {
    z-index: 1;
}

#bg-back {
    z-index: 0;
}

#bg-front {
    z-index: 2;
}


/**************************************************
 * Positions
 **************************************************/

.farLeft {
    left: -12.5%;
}

.left {
    left: 0%;
}

.almostLeft {
    left: 12.5%;
}

.halfLeft {
    left: 25%;
}

.center {
    left: 50%;
}

.farHalfLeft {
    left: 75%;
}

.halfRight {
    right: 25%;
}

.almostRight {
    right: 12.5%;
}

.right {
    right: 0%;
}

.farRight {
    right: -12.5%;
}

/************************************************************
 * Button classes.
 ************************************************************/

.smooth-button {
    background: linear-gradient(#0088CC, #0066AA);
    background-color: #0088CC;
    color: black;
    padding: 0.1em;
}

.smooth-button:hover:not(:disabled) {
    background: linear-gradient(#80d5ff, #0088CC);
    background-color: #55C0ff;
}

.smooth-button.red {
    background: linear-gradient(#BB3333, #9F1616);
    background-color: #BB3333;
}

.smooth-button.red:hover:not(:disabled) {
    background: linear-gradient(#F88888, #BB3333);
    background-color: #F66666;
}

.smooth-button.green {
    background: linear-gradient(#33AA33, #168F16);
    background-color: #33AA33;
}

.smooth-button.green:hover:not(:disabled) {
    background: linear-gradient(#80FF80, #33AA33);
    background-color: #66FF66;
}

.smooth-button.orange {
    background: linear-gradient(#F46028, #B03800);
    background-color: #FF5700;
}

.smooth-button.orange:hover:not(:disabled) {
    background: linear-gradient(#FF8028, #E24000);
    background-color: #FF5700;
}

.smooth-button:disabled {
    background: linear-gradient(#CCC, #AAA);
    background-color: #BBB;
    color: #333;
}

.smooth-button:active:not(:disabled) {
    padding-left: 0.15em;
    padding-right: 0.05em;
}

.hide-table-button,
.table-bug-report-button,
.table-feedback-report-button {
    position: absolute;
    width: 3.25%;
    height: 4.50%;
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: rgba(155, 155, 155, 0.5);
}

.hide-table-button {
    bottom: 29.2%;
}

.table-bug-report-button {
    bottom: 24.6%;
}

.table-feedback-report-button {
    bottom: 19.5%;
    width: 5%;
    height: 5%;
    line-height: 1.1;
}

.table-feedback-report-button>div {
    font-size: 70%;
}

.hide-table-button:hover,
.table-bug-report-button:hover,
.table-hard-refresh-button:hover,
.table-feedback-report-button:hover {
    background-color: rgba(155, 155, 155, 0.75);
}

.hide-table-button:active,
.table-bug-report-button:active,
.table-hard-refresh-button:active,
.table-feedback-report-button:active {
    background-color: rgba(155, 155, 155, 0.9);
}

.game-menu-dropup {
    position: absolute;
    left: 1%;
    bottom: 1%;

    width: 7%;
    height: 8%;
}

.menu-dropdown-button {
    width: 100%;
    height: 100%;
}

.menu-dropdown-button span {
    font-size: 2em;
}

.dropdown-menu {
    padding-top: 0px;
    padding-bottom: 0px;
}
.game-menu-dropup .dropdown-menu {
    background: transparent;
    border: 0px none;
    width: 15em;
    font-size: 1.4rem;
    min-width: unset;
}
@media (min-resolution: 120dpi) {
    .game-menu-dropup .dropdown-menu {
        font-size: 18px;
    }
}
ul.dropdown-menu>li {
    margin: 0;
    margin-top: -0.2rem;
    padding: 0;
}

.dropdown-button-item span {
    display: inline;
    margin: 0 3%;
}

.dropdown-button-item {
    width: 100%;

    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
}

.table-hard-refresh-button{
    position: absolute;
    left: 10%;
    bottom: 1%;

    width: 5.5%;
    height: 5%;
	background-color: rgba(155, 155, 155, 0.5);
}

/************************************************************
 * Classes for modals styled like the game table.
 ************************************************************/

.modal {
    position: absolute;
    width: 100vw;
    height: 75vw;
    max-width: 133.33vh;
    max-height: 90vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    padding-left: 1.7rem;
}

.modal-open {
    overflow: hidden;
}

.modal-table-container {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0.5%;
    overflow: hidden;
    display: table;
}

.modal-cell-container {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

.modal-flex-container {
    width: 100%;
    height: 100%;
}

.table-modal .modal-dialog {
    height: auto;
    box-sizing: border-box;
    margin: 0px auto;
    padding: 0.5rem;
    background: linear-gradient(#333333, #222222);
    background-color: #333333;
    color: black;
}

/* Applies the layout rules, but not the background rules. */
.transparent-modal-dialog {
    height: auto;
    box-sizing: border-box;
    margin: 0px auto;
    padding: 0.5rem;
}

.thin-modal-dialog {
    width: 35%;
}

.average-modal-dialog {
    width: 50%;
}

.wide-modal-dialog {
    width: 65%;
}

.very-wide-modal-dialog {
    width: 80%;
}

.table-modal .modal-dialog-surface {
    width: 100%;
    padding: 0.5%;
    background: radial-gradient(#888888, #666666);
    background-color: #777777;
    box-sizing: border-box;
    font-size: 100%;
}

.modal-flex-container .modal-dialog-surface,
.modal-flex-container .modal-dialog {
    height: 100%;
}

.modal-flex-container .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    /*height: 100%;*/
}

.modal-flex-container .modal-footer {
    margin-top: auto;
}

.table-modal .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}

.table-modal .modal-header {
    border: none;
    font-size: 110%;
    padding: 2%;
}

.table-modal .modal-title {
    color: black;
    font-size: 120%;
}

.table-modal .modal-subtitle {
    color: black;
    font-size: 100%;
}

.table-modal .modal-left {
    text-align: left;
}

.table-modal .modal-body {
    position: relative;
    text-align: center;
    padding: 1.5%;
}

.table-modal .modal-body-container {
    width: 100%;
    margin: 0 auto;
    display: inline-block;
}

.table-modal .modal-body-stretch-container {
    margin: 0 auto;
    display: inline-block;
}

.table-modal .modal-body-full-container {
    width: 100%;
    margin: 0 auto;
    display: inline-block;
}

.table-modal .modal-body-special-container {
    margin: 0 auto;
    display: inline-block;
    width: 100%;
}

.strip-selector-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.25rem;

    width: 100%;
    margin-left: 1.25rem;
    margin-bottom: 1rem;
}

.player-strip-selector {
    display: none;
    width: 9.5rem;
    height: 9.5rem;

    opacity: 0.4;
    background-color: white;
}

.player-strip-selector.available {
    display: inline;
}

.player-strip-selector:hover {
    opacity: 0.7;
}

.player-strip-selector.selected, .player-strip-selector.selected:hover {
    opacity: 1;
}

.table-modal .modal-footer {
    text-align: center;
    border: none;
    padding: 0.5%;
}

.table-modal .modal-button {
    height: 75%;
    width: 25%;
    padding: 2%;
    font-size: 120%;
}

.table-modal .modal-button:active,
.edit-options-row button:active {
    padding-left: calc(2% + 0.05em);
    padding-right: calc(2% - 0.05em);
}

.pagination li a {
    color: black;
    background-color: #BBBBBB;
    border-color: black;
    border-width: 0.1rem;
}

.pagination li a:hover {
    color: black;
    background-color: #DDDDDD;
    border-color: black;
}

.pagination .active a {
    background-color: #439AD7;
    border-color: white;
}

.pagination .active a:hover {
    background-color: #63AAE7;
    border-color: white;
}

.credit-table {
    width: 100%;
    font-size: 100%;
}

.credit-table td {
    padding: 0 1rem;
}

.credit-modal-label {
    padding: 0.2rem 0;
    background-color: lightgrey;
}

.wide-textbox {
    width: 70%;
    font-size: 150%;
    text-align: center;
}

.wide-dropdown {
    width: 100%;
    margin: 0.5rem 0;
    background-color: #BBBBBB;
}

#sort-dropdown:hover {
    background-color: #DDDDDD;
}

#sort-dropdown-selection {
    color: black;
}

.sort-dropdown-options {
    top: 80%;
    left: 50%;
    right: auto;
    width: 70%;
    min-width: auto;
    text-align: center;
    font-size: inherit;
    background-color: #FFFFFF;
    transform: translate(-50%, 0);
}

.sort-dropdown-options>li>a:hover {
    background-color: #63AAE7;
    background-image: none;
    color: white;
}

#player-tags-modal.male .player-tag-select.female,
#player-tags-modal.male .player-tag-select option.female {
    display: none;
}

#player-tags-modal.female .player-tag-select.male,
#player-tags-modal.female .player-tag-select option.male {
    display: none;
}

.tag-columns {
    max-height: 5rem;
}

.player-tag-select {
    display: flex;
    width: 75%;
    justify-content: space-between;
    font-size: 1.4rem;
    margin: 0 auto;
    padding: 1rem 0;
    border-bottom: 0.1rem solid #666;
}

.player-tag-select:last-child {
    border: none;
}

.player-tag-select input,
.player-tag-select select {
    max-width: 50%;
}

.player-tag-select>.colorAndLabel {
    display: flex;
    justify-content: flex-end;
    max-width: 50%;
}

.player-tag-select>.colorAndLabel.range {
    max-width: 80%;
}

.player-tag-select input[disabled] {
    background: none;
    border: none;
}

.player-tag-select>.colorAndLabel.range input[disabled] {
    /*width: 25%;*/
    min-width: 7.5rem;
}

.player-tag-select input[type=range] {
    -webkit-appearance: none;
    /*margin: 0.5rem 0;*/
    margin: 2% 0;
    padding: 0;
    max-width: 100%;
}

.player-tag-select input[type=range]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: linear-gradient(90deg, white, #f1c6a3, #c08e66, #230800);
    width: 100%;
    height: 100%;
}

.player-tag-select input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0.8rem;
    height: calc(100% + 1rem);
    margin: -0.5rem 0;
    box-shadow: 0 0 0 0.2rem black;
}

.player-tag-select input[type=range]::-ms-track {
    background: linear-gradient(90deg, white, #f1c6a3, #c08e66, #230800);
}

.player-tag-select input[type=range]::-ms-thumb {
    margin: 0;
    padding: 60% 0;
    border: 0.2rem solid black;
    box-shadow: none;
}

.player-tag-select input[type=range]::-moz-range-track {
    background: linear-gradient(90deg, white, #f1c6a3, #c08e66, #230800);
    height: 50%;
}

.player-tag-select input[type=range]::-moz-range-thumb {
    border: 0.2rem solid black;
    border-radius: 0;
    width: 0.8rem;
    height: 100%;
    background: transparent;
}

/* Prevents the long bug report output from overflowing the modal width. */
#bug-report-output {
    min-width: 100%;
    width: 0;
    resize: none;
    font-family: monospace;
    font-size: 1.3rem;
}

.bug-report-out-explanation {
    margin-top: 0.75em;
}

#bug-report-status {
    padding-bottom: 0.5em;
    font-size: 110%;
}

#bug-report-modal .modal-dialog-surface,
#player-tags-modal .modal-dialog-surface {
    overflow-y: auto;
    overflow-x: hidden;
}

.modal a {
    color: hsla(207, 56%, 37%, 1);
}

.modal a:hover {
    color: hsla(207, 56%, 28%, 1);
}

#help-modal .modal-body {
    overflow-y: auto;
}

.help-page h2 {
    margin-top: 0px;
}

.faq-question {
    margin-top: 1rem;
}

.faq-answer {
    font-size: 85%;
}

.faq-answer ul li {
    text-align: left;
}

.faq-poker-hands-infographic {
    width: 100%;
}

.background-option {
    background-size: 100% 100%;
    width: 24rem;
    height: 18rem;

    padding: 0.5rem;
    border: 0.3rem solid #111111;
    border-radius: 0.3rem;

    margin: 0.5rem;
    vertical-align: top;

    transition-property: border-color;
    transition-duration: 0.5s;

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.background-option .background-info {
    padding: 0.2rem 0.5rem;
    text-align: center;

    border: 0.15rem solid #111111;
    border-radius: 0.5rem;

    background-color: #FFFFFF;
    opacity: 0.50;

    font-size: 1.25rem;

    transition-property: opacity;
    transition-duration: 0.5s;
}

.background-option .background-title {
    font-weight: bold;
    font-size: 1.4rem;
}

.background-option .background-author::before {
    content: "by: ";
}

.background-option:hover,
.background-option:active {
    border-color: #FFFFFF;
}

.background-option:hover .background-info,
.background-option:active .background-info {
    opacity: 1.0;
}

.background-credits-container {
    text-align: left;
}

#io-modal .modal-content {
    overflow-y: auto;
    max-height: 75vh;
}

.import-error {
    font-size: 125%;
    margin-bottom: 2%;
    color: firebrick;
}

.options-container {
    overflow-y: auto;
    max-height: 45rem;
}

.extra-settings-group {
    width: 100%;
}

.extra-settings-group .setting-toggle {
    padding-right: 1rem;
}

.extra-settings-group .setting-toggle > ul {
    display: flex;
}

.extra-settings-group .setting-description {
    padding-right: 1rem;
}

.discord-row {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.discord-row>* {
    margin: 0.25rem;
}

.discord-desc {
    padding: 0 0.5rem;
}

.discord-link {
    border-width: 2.5px;
    border-radius: 4px;
    width: 100%;
    max-width: 24vw;
    margin: 0 auto;
    background: linear-gradient(110deg, #738BD7 60%, #697EC4 60%);
}

.discord-link:hover {
    filter: brightness(1.2);
}

/************************************************************
 * Classes for the dialogue transcript modal.
 ************************************************************/
#log-container {
    width: 100%;
    overflow-y: scroll;
    max-height: 40rem;
}

.log-entry-container {
    border: 0.2rem solid #111111;
    border-radius: 0.5rem;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    margin-bottom: .5%;
    opacity: .75;
    cursor: pointer;
}

.log-entry-container:hover {
    opacity: 1;
}

.log-entry-label {
    float: left;
    margin-left: .25em;
    width: 12.5%;
    height: 100%;
}

.log-entry-text {
    float: left;
    margin-left: .5em;
    width: 87.5%;
    height: 100%;
    text-align: left;
}


.log-entry-message {
    width: 100%;
    height: 100%;
}

/************************************************************
 * Classes for the changelog / version modal.
 ************************************************************/

#version-modal .modal-body {
    max-height: 50rem;
    overflow-y: scroll;
}

.changelog-version-label {
    width: 10%;
    padding-bottom: 1.5%
}

.changelog-date-label {
    width: 25%;
    padding-bottom: 1.5%
}

.changelog-entry-text {
    width: 65%;
    padding-bottom: 1.5%
}

/************************************************************
 * Classes for the resort modal.
 ************************************************************/

#resort-modal .modal-footer {
    margin-top: 2rem;
}

#resort-modal .resort-link-button {
    padding: 0.75rem;
    font-size: 2rem;
    color: black;

    margin-bottom: 1rem;
}

/************************************************************
 * Classes for the announcement modal.
 ************************************************************/

#event-announcement-modal .event-announcement-link {
    font-size: 1.6rem;
    padding: 0.5rem 3rem;
    color: #000;
}

/************************************************************
 * Classes for the broken offline version modal.
 ************************************************************/

#broken-offline-modal .section-container {
    display: flex;
}

#broken-offline-modal .section {
    margin: 1rem;
 }

/************************************************************
 * All of the classes needed to make the dialogue bubbles
 * look the awesome way that they do.
 ************************************************************/

.dialogue-bubble {
    width: 100%;
    position: absolute;
    z-index: 0;
    font-size: 113%;
    background: var(--dialogue-background-color);
    color: var(--dialogue-text-color);
    opacity: 95%;
    border-radius: 1rem;
    padding: 1.2rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: center;
}

.screen .dialogue-bubble {
    min-height: 18%;
    top: 2%;
}

.screen .dialogue-bubble,
.stats-box {
    top: 1%;
    width: 24.5%;
    margin: 0 0.25%;
}

.dialogue-bubble>* {
    z-index: 1;
}

.dialogue-bubble>span.dialogue.small {
    font-size: 92%;
}

.dialogue-bubble>span.dialogue.smaller {
    font-size: 85%;
}

.arrow-down::before,
.arrow-left::before,
.arrow-right::before,
.arrow-up::before {
    width: 2.5rem;
    height: 2.5rem;

    content: "";
    position: absolute;
    background: var(--dialogue-background-color);
    border-color: transparent black black transparent;
    border-width: 0.35rem;
    border-style: solid;

    /* Clip arrow to only the part sticking out of the box. */
    clip-path: polygon(100% -0.1rem, 100% 100%, -0.1rem 100%);
}

.arrow-down::before {
    left: var(--arrow-location);
    bottom: calc(-2.5rem / 2);
    margin-left: calc(-2.5rem / 2);
    transform: scaleX(0.6) rotate(45deg);
}

.arrow-left::before {
    top: var(--arrow-location);
    left: calc(-2.5rem / 2);
    margin-top: calc(-2.5rem / 2);
    transform: scaleY(0.6) rotate(135deg);
}

.arrow-right::before {
    top: var(--arrow-location);
    margin-top: calc(-2.5rem / 2);
    right: calc(-2.5rem / 2);
    transform: scaleY(0.6) rotate(-45deg);
}

.arrow-up::before {
    left: var(--arrow-location);
    margin-left: calc(-2.5rem / 2);
    top: calc(-2.5rem / 2);
    transform: scaleX(0.6) rotate(-135deg);
}

.repeat-count {
    color: red;
}

/************************************************************
 * Classes for Developer Mode.
 ************************************************************/

.dev-select-button {
    position: absolute;
    right: 20%;
}

.dev-select-button.active {
    background: linear-gradient(#80FF80, #33AA33);
    background-color: #66FF66;
}

.edit-options-row {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;

    display: none;
    align-items: stretch;
    justify-content: flex-end;
    z-index: 1;
    /* Force layering _over_ poses */
}

.edit-pose-row {
    position: absolute;
    top: 130%;
    right: 0;
    left: 0;

    background-color: #555555;

    display: none;
    padding: 1.5% 2%;
    z-index: 1;
}

.edit-options-row button {
    padding: 2.5% 2%;
    font-size: 100%;

    margin-left: 1.5%;

    border-top-left-radius: 0px;
    border-top-right-radius: 0px;

    background: linear-gradient(#D9D9D9, #A6A6A6);
    background-color: #D9D9D9;
}

.edit-options-row button:first-child {
    margin-left: 0;
}

.edit-options-row button:hover {
    background: linear-gradient(#FFFFFF, #D9D9D9);
    background-color: #FFFFFF;
}

.edit-options-row .edit-pose {
    font-size: 1.5rem;
}

.dialogue-pose-entry {
    font-family: monospace;
    font-size: 1.85rem;
    line-height: 2.22rem;

    width: 100%;
    height: 100%;
}

.dialogue-edit-entry {
    flex: 4;

    font-family: monospace;
    font-size: 1.85rem;
    line-height: 2.22rem;
    min-height: 11.1rem;
    cursor: text;
}

.dialogue-edit-status {
    flex: 1;

    font-family: monospace;
    font-size: 1.75rem;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.screen .dialogue-bubble.under {
    z-index: -1000;
}

#game-screen.dev-mode .dialogue-bubble,
.screen .dialogue-bubble.over {
    z-index: 1000;
}

.dialogue-bubble[data-editing="preview"] .dialogue-edit-status::after {
    content: " (Preview)";
}

.edit-preview {
    margin-right: auto;
}

.dialogue-edit,
.dialogue-edit-button,
.dialogue-entry-button {
    display: none;
}

.dialogue-bubble[data-dev-target="true"] .dialogue-edit-button {
    display: inline;
}

.dialogue-bubble[data-editing] .dialogue-entry-button {
    display: inline;
}

.dialogue-bubble[data-editing] .dialogue-edit-button,
.dialogue-bubble[data-editing] .dialogue-edit-status {
    display: inline;
}

.dialogue-bubble[data-editing]:not([data-editing="preview"])>.dialogue {
    display: none;
}

.dialogue-bubble[data-editing="entry"] .dialogue-edit-entry {
    display: block;
}

.dev-mode .edit-options-row {
    display: flex;
}

/************************************************************
 * Classes for the character debug info modal.
 ************************************************************/

.character-debug-button {
    position: absolute;
    left: 0;
}

#character-debug-modal .modal-body-container {
    overflow-y: auto;
    max-height: 49rem;
}

.debug-info-container {
    display: flex;
}

.debug-info-column {
    flex: 1;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.debug-info-header:first-child {
    margin-top: 0;
}

.debug-info-header>a {
    color: black;
    transform: translateX(-1.5rem);
    display: inline-block;
}

.debug-info-header-status {
    font-size: 2.5rem;
    float: left;
}

.debug-section-row {
    display: flex;
    font-size: 1.2em;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.debug-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14rem;
    flex: none;
}

.debug-case-type, .debug-case-priority, .debug-case-stage, .debug-case-test, .debug-case-condition-value, .debug-case-markers, .debug-case-pose {
    font-family: monospace;
}

.debug-case-condition-attribute:not(:nth-child(2))::before {
    content: ",";
}

.debug-case-condition-value::before, .debug-case-condition-type::before {
    content: " ";
}

.debug-marker-listing {
    text-align: left;
}

.debug-marker-basename, .debug-marker-target-id, .debug-marker-value, .debug-tag-name {
    font-family: monospace;
    display: inline-block;
}

.debug-marker-target-id::before {
    content: "[";
}

.debug-marker-target-id::after {
    content: "]";
}

.debug-marker-value {
    padding-left: 0.6rem;
}

.debug-marker-value::before {
    content: "= ";
}

.debug-marker-value.empty-value {
    font-style: italic;
}

.debug-marker-value.empty-value::before {
    font-style: normal;
}

#debug-tag-listing {
    display: flex;
    flex-flow: row wrap;
}

.debug-tag-entry {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    padding-bottom: 0.75rem;
}

.debug-tag-removed {
    text-decoration: line-through;
}

.debug-tag-modified-stage {
    font-style: italic;
    padding-left: 0.6rem;
}

.debug-tag-modified-stage::before {
    content: "(";
}

.debug-tag-modified-stage::after {
    content: ")";
}


/************************************************************
 * Classes for opponent images.
 ************************************************************/

.opponent-image-area {
    position: absolute;
    width: 25%;
    height: 80%;
    bottom: 0;
    pointer-events: none;
}

.opponent-image {
    position: absolute;
    width: auto;
    height: 100%;
    margin: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.opponent-image.custom-pose {
    position: relative;
    transform-origin: bottom center;
}

/************************************************************
 * Classes for the title screen.
 ************************************************************/

/* Common title classes and elements: */

#initial-warning {
    position: absolute;
    top: 22.5%;
    left: 5%;
    width: 90%;
    bottom: 0;
}

.warning-container {
    position: relative;
    top: 5%;
    max-height: 30em;
    overflow-y: scroll;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #F0F0F0;
    text-align: center;
    text-shadow:
        black -0.1rem 0 0,
        black 0.1rem 0 0,
        black 0 -0.1rem 0,
        black 0 0.1rem 0,
        black 0.07rem 0.07rem 0,
        black -0.07rem 0.07rem 0,
        black -0.07rem -0.07rem 0,
        black 0.07rem -0.07rem 0;
    filter: drop-shadow(black 0.1rem 0.1rem 0.25rem);
}

.warning-start-text, .warning-info-text, .warning-confirm-text {
    font-size: 130%;
}

.warning-start-text, .warning-confirm-text {
    margin-left: 10em;
    margin-right: 10em;
}

.warning-start-text {
    margin-bottom: 1em;
}

.warning-info-text {
    margin-left: 8em;
    margin-right: 8em;
    margin-bottom: 1em;
}

.warning-confirm-text {
    margin-bottom: 2em;
}

.legal-text {
    font-size: 1em;
    font-style: italic;
    margin-left: 1em;
    margin-right: 1em;
}

.title-banner-container {
    position: absolute;
    width: 100%;
    top: 4%;
    pointer-events: none;
}

.title-banner-area {
    width: 100%;
    height: 100%;
    padding: 0.5%;
    background: linear-gradient(#333333, #222222);
    background-color: #333333;
}

.title-banner {
    width: 100%;
    height: 100%;
    padding: 0.1%;
    background: linear-gradient(#888888, #666666);
    background-color: #888888;
}

#main-title-container {
    position: absolute;
    top: 20%;
    left: 25%;
    width: 50%;
    bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-menu-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
}

#initial-warning .title-menu-buttons-container {
    margin-top: 5%;
}

#warning-load-container {
    font-size: 4rem;
    text-shadow:
        black -0.1rem 0 0,
        black 0.1rem 0 0,
        black 0 -0.1rem 0,
        black 0 0.1rem 0,
        black 0.07rem 0.07rem 0,
        black -0.07rem 0.07rem 0,
        black -0.07rem -0.07rem 0,
        black 0.07rem -0.07rem 0;
    filter: drop-shadow(black 0.1rem 0.1rem 0.25rem);
}

.game-load-label {
    color: #F0F0F0;
}

.game-load-label::before {
    content: "Loading ";
}

.game-load-label::after {
    content: ": ";
}

.game-load-progress {
    color: #DD3333;
}

.game-load-progress::after {
    content: "%";
}

.title-content-button {
    background: rgba(240, 240, 240, 0.95);
    opacity: 0.8;
    width: 7rem;
    height: 7rem;
    object-fit: cover;
    filter: contrast(0.8) brightness(0.95);
}

.title-content-button:hover,
.focus-indicators-enabled .title-content-button:focus {
    opacity: 0.87;
    filter: contrast(0.95);
}

.title-content-button.selected {
    opacity: 1;
    background-color: white;
    filter: none;
}

.title-content-button:active {
    opacity: 0.93;
    filter: none;
}

/* Main title screen blocks: */

#title-name-block {
    height: 16%;
    width: 80%;
}

.title-gender-size-container {
    width: 80%;
    display: flex;
    gap: 0.4rem;
}

.title-size-block {
    width: 54%;
    margin-left: auto;

    display: flex;
    justify-content: space-between;
    gap: 0.2rem;
}

#title-wardrobe-block {
    width: 90%;
    margin-top: 1.5%;
}

/* Name / Gender / Size block elements: */

.title-label {
    padding: 0;
    margin-top: 0.5rem;
    margin-bottom: 0;
    text-align: center;
    font-size: 160%;
    color: #DD3333;
    text-shadow:
        black -0.2rem 0 0,
        black 0.2rem 0 0,
        black 0 -0.2rem 0,
        black 0 0.2rem 0,
        black 0.14rem 0.14rem 0,
        black -0.14rem 0.14rem 0,
        black -0.14rem -0.14rem 0,
        black 0.14rem -0.14rem 0;
    filter: drop-shadow(black 0.1rem 0.1rem 0.4rem);
}

#player-name-field {
    width: 100%;
    height: 60%;
    text-align: center;
    font-size: 200%;
    background: rgba(240, 240, 240, 1);
}

#main-title-container.male #female-size-container,
#main-title-container.female #male-size-container {
    display: none;
}

/* Title clothing block elements: */

#title-clothing-container {
    display: grid;
    grid-template-columns: repeat(6, max-content);
    row-gap: 0.3rem;
    column-gap: 0.6rem;
    padding-right: 2.0rem;
    height: 23rem;
    width: max-content;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
}

.player-clothing-select {
    scroll-snap-align: start;
}

.custom-clothing-img {
    width: auto;
    height: auto;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#title-clothing-container .player-clothing-select.locked {
    background: repeating-linear-gradient(-45deg, #333 0, #333 0.5rem, #888 0.6rem, #888 1.1rem, #333 1.2rem);
}

#main-title-container.female .title-content-button.selected {
  border-color: rgb(239, 131, 152);
}
#main-title-container.male .title-content-button.selected {
  border-color: rgb(123, 161, 228);
}
#title-clothing-container .clothing-separator {
    border-top: 0.2rem solid gray;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    grid-column: 1 / span 6;
}

#title-warning-label {
    height: 2rem;
    color: #F0F0F0;
    text-align: center;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    text-shadow:
        black -0.1rem 0 0,
        black 0.1rem 0 0,
        black 0 -0.1rem 0,
        black 0 0.1rem 0,
        black 0.07rem 0.07rem 0,
        black -0.07rem 0.07rem 0,
        black -0.07rem -0.07rem 0,
        black 0.07rem -0.07rem 0;
    filter: drop-shadow(black 0.1rem 0.1rem 0.25rem);
}

.title-clothing-button {
    position: relative;
    width: 15.7%;
}

.title-candy-hidden-button {
    position: absolute;
    width: 4.8rem;
    height: 5.2rem;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    right: 1.8rem;
    top: 2.5rem;
}

/* Gallery / Start / Tag button elements: */

.centered-icon-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

.centered-icon-image {
    width: 56%;
    height: auto;
}

.centered-icon-glyphicon {
    width: 2em;
    height: auto;
    font-size: 1.25em;
}

.title-start-edge {
    width: 18rem;
    font-size: 200%;
    padding: 0.25rem;
    background: linear-gradient(#222222, #111111);
}

.title-start-button {
    width: 100%;
}

.title-entrance-image {
    margin-left: 0.7rem;
    margin-top: 0.6rem;
    margin-right: 0.2rem;
    width: 88.5%;
}

.title-gallery-edge {
    width: 20%;
    height: 80%;

    font-size: 200%;
    padding: 0.1rem;
    background: linear-gradient(#222222, #111111);

    margin-right: 6.25%;
}

.title-gallery-button {
    width: 100%;
    height: 100%;
}

.title-tags-edge {
    width: 20%;
    height: 80%;

    font-size: 200%;
    padding: 0.1rem;
    background: linear-gradient(#222222, #111111);

    margin-left: 6.25%;
}

.title-tags-button {
    width: 100%;
    height: 100%;
    font-size: 100%;
}

.version-label {
    width: 15rem;
    background: radial-gradient(#DDDDDD, #AAAAAA);
    background-color: #AAAAAA;
    text-align: center;
    font-size: 1.6rem;
    margin: 0.5rem auto;
    padding: 0.2rem 0.5rem;
}

.title-credit-button {
    display: block;
    width: 15rem;
    height: 2.8rem;
    font-size: 1.6rem;
    margin: 0 auto;
}

.title-next-button {
    display: block;
    width: 8rem;
    font-size: 2.2rem;
    height: 4rem;
    margin: 0 auto;
    padding: 0.5rem 1rem 0.5rem 1rem;
}

.banner-flair {
    text-align: center;
    font-size: 120%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
    top: 17.5%;
    position: absolute;
    padding-top: 0.5%;
    height: 5%;
    width: 4%;
}

.title-bug-report-button {
    left: 1%;
}

.reddit-button {
    left: 5.5%;
}

.reddit-logo {
    height: 78%;
}

.twitter-button {
    left: 10%;
}

.twitter-logo {
    height: 90%;
}

.bluesky-button {
    left: 14.5%;
}

.bluesky-logo {
    height: 90%;
}

.discord-button {
    left: 19%;
    background: rgb(88, 101, 242) linear-gradient(rgb(88, 101, 242), rgb(49, 62, 207));
}

.discord-logo {
    height: 65%;
    transform: translateY(-0.2rem);
}

.title-load-button {
    left: 32.5%;
}

.title-extras-button {
    left: 23.5%;
}

.title-fullscreen-button {
    left: 28%;
}

.title-resort-button {
    right: 17%;
    top: 22%;
    width: 12.5%;
    font-size: 140%;
    padding-top: 0.1em;
}

.title-calendar-button {
    left: 62.25%;
}

.title-announcement-dropdown {
    position: absolute;
    right: 41%;
    left: 41%;
    /* width: 25%; */
    top: 16.25%;
    font-size: 1.8rem;
    padding-top: 0.1em;
    margin-left: 0;
    margin-right: 0;
}

#announcement-dropdown-selection {
    font-size: 1.8rem;
}

#announcement-dropdown:hover, #announcement-dropdown:focus, #announcement-dropdown.focus {
    color: #000;
}

#announcement-dropdown {
    line-height: 1.25;
}

.announcement-dropdown-options {
    top: 90%;
    left: 0px;
    min-width: 16rem;
    text-align: center;
    font-size: 1.6rem;
}

.announcement-dropdown-options > li > a {
    color: #000;
}

.announcement-dropdown-item {
    cursor: pointer;
}

.announcement-dropdown-item  {
    padding: 0.5rem 2rem !important;
}

.announcement-dropdown-item:active:not(:disabled) {
    padding: 0.5rem 2rem;
}

.version-button {
    width: 16.5%;
    right: 17%;
    padding-top: 0.35em;
    line-height: 85%;
}

.version-button>.substitute-version-time {
    font-size: 75%;
    white-space: nowrap;
}

.background-select-button {
    width: 5rem;
    height: 15rem;
}

.transcript-step-button {
    width: 3.5rem;
    height: 6rem;
}

.edge-button {
    top: 50%;
    transform: translateY(-80%);
    position: fixed;
    font-size: 150%;
    border-width: 0.3rem;
    background-color: rgba(200, 200, 200, 0.3);
}

.edge-button.left {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: none;
}
.edge-button.right {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: none;
}
.edge-button:hover {
    background-color: rgba(200, 200, 200, 0.5);
}
.edge-button:active {
    background-color: rgba(200, 200, 200, 0.7);
}

.title-help-button {
    width: 15.5%;
    height: 6.5%;
    right: 1%;

    font-size: 150%;

    background: linear-gradient(#f34141, #9F1616);
    background-color: #f34141;
}

.title-help-button:hover {
    background: linear-gradient(#F88888, #BB3333);

    background-color: #F66666;
}

#left-title-candy {
    left: 8em;
    transform-origin: bottom left;
}

#right-title-candy {
    right: 8em;
    transform-origin: bottom right;
}

.title-candy {
    position: absolute;
    bottom: 0;
    height: 80%;
    pointer-events: none;
}

/************************************************************
 * Classes for the main select screen.
 ************************************************************/

.main-select-area {
    position: absolute;
    width: 90%;
    height: 12%;
    left: 5%;
    bottom: 3%;
    background-color: #282828;
}

.main-select-button {
    position: absolute;
    width: 9.5%;
    height: 94%;
    font-size: 140%;
    bottom: 3%;
}

.select-random-container {
    position: absolute;
    height: 94%;
    bottom: 3%;
    right: 12%;
    width: 29.5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2% 1.5%;
}

.select-quadrant-button {
    width: 100%;
    height: 100%;
    white-space: nowrap;
}

@keyframes toast {
    from {
	opacity: 0%;
	top: 30%;
	/*left: 10%;*/
	animation-timing-function: ease;
    }
    25% {
	opacity: 100%;
	top: 48%;
	/*left: 49%;*/
	animation-timing-function: linear;
    }
    75% {
	opacity: 100%;
	top: 52%;
	/*left: 51%;*/
	animation-timing-function: ease-in;
    }
    to {
	opacity: 0%;
	top: 65%;
	/*left: 90%;*/
    }
}

.toast {
    position: absolute;
    background: #f5f5f5e0;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 0.2em 0.3em;
    opacity: 0%;
    animation: 4s toast;
}

#main-select-button {
    position: absolute;
    height: 120%;
    width: 14%;
    right: 43%;
    bottom: -10%;
    font-size: 180%;
    text-align: center;
}

#main-select-button:disabled {
    background: linear-gradient(#AAAAAA, #888888);
    background-color: #AAAAAA;
}

#select-advance-top {
    position: absolute;
    width: 16%;
    height: 16%;
    top: -16%;
    left: 42%;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #282828;
}

#select-advance-bottom {
    position: absolute;
    width: 16%;
    height: 16%;
    bottom: -16%;
    left: 42%;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #282828;
}

.select-back-button {
    left: 0.5%;
}

#select-group-button {
    left: 22%;
}

#select-group-testing-button {
    left: 12%;
}

#select-help-button {
    left: 32%;
}

#select-remove-all-button {
    right: 0.5%;
}

#individual-search-button,
#group-search-button {
    left: 22%;
}

#group-switch-testing-button {
    left: 12%;
}

#individual-basic-info-button,
#group-basic-info-button {
    right: 22%;
}

#individual-credits-button,
#group-credits-button {
    right: 12%;
}

#individual-more-info-button,
#group-more-info-button {
    right: 2%;
}

.opponent-suggestion-container {
    position: absolute;
    width: 100%;
    height: 80%;
    margin: auto;
    top: -19%;
    left: 0;
    right: 0;
    pointer-events: none;
}

.opponent-suggestion-header {
    position: absolute;
    left: 0.5%;
    top: -5%;
    height: 5.5%;
    width: 99%;
    text-align: center;
    background: var(--dialogue-background-color);
    color: var(--dialogue-text-color);
    z-index: 1;
}

.opponent-suggestion-row {
    width: 100%;
    height: 50%;
}

.opponent-suggestion-cell {
    float: left;
    width: 50%;
    height: 100%;
    margin: 0;
}

.opponent-suggestion-image {
    display: block;
    margin: 0 auto 0 50%;
    width: auto;
    height: 100%;
    opacity: 0.6;
    transform: translate(-50%);
    transform-origin: bottom;
}

.opponent-suggestion-label {
    display: block;
    position: relative;
    bottom: 25%;
    text-align: center;
    background-color: #F5F5F5;
    left: 1%;
    width: 98%;
    pointer-events: auto;
}

.select-slot-button {
    width: 100%;
    height: calc(4.1rem * 7/5);
    /* To match small-card-image */
    font-size: 130%;
}

.select-slot-button.suggestion-shown {
    height: 4.5rem;
}

.prefill-select-button {
    width: 100%;
    height: 4rem;
    font-size: 130%;
    margin-bottom: 0.2rem;
}

.prefill-suggestion {
    opacity: 0.6;
}

.suggestion-label::before {
    font-weight: bold;
    content: "Suggested: ";
}

.selection-badge-row {
    position: absolute;
    top: 8%;
    height: 8rem;
    width: 24.5%;
    pointer-events: none;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.selection-badge-row .badge-icon {
    opacity: 0.75;

    height: 100%;
    width: auto;
}

#selection-data-collection-banner-container {
    position: absolute;
    top: 2%;
    left: 0;
    right: 0;
    z-index: 1;
    
    display: flex;
    justify-content: center;
}

#selection-data-collection-banner-border {
    background: linear-gradient(#333333, #222222);
    background-color: #333333;
}

#selection-data-collection-banner {
    margin: 0.25rem;

    background: radial-gradient(#888888, #666666);
    background-color: #777777;

    display: flex;
}

#collection-banner-text {
    flex: 10;
    margin-left: 0.5rem;
    font-size: 1.35rem;
    padding: 0.5rem 0;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

#collection-banner-text a {
    color: #2c6699;
}

#collection-banner-text p {
    margin: 0
}

#collection-banner-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}

#collection-banner-buttons button {
    width: 8rem;
    height: 3rem;
}

#enable-data-collection-btn {
    margin-left: 1.5rem;
    margin-right: 0.5rem;
}

#disable-data-collection-btn {
    margin-right: 1rem;
}


/************************************************************
 * Classes for the new individual select screen.
 ************************************************************/

/************************************************************
  * Classes for select screen cards.
  ************************************************************/

.selection-cards-container {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 75%;
    height: 90%;

    overflow-y: scroll;
    overflow-x: hidden;

    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-auto-rows: min-content;
    scroll-snap-type: y proximity;
}

.selection-card {
    vertical-align: top;
    display: inline-block;

    height: 21.65rem;
    margin: 0.4rem 0.4rem 0 0;
    background-color: rgba(51, 51, 51, 0.65);

    border: 0.2rem solid #111111;
    border-radius: 0.5rem;

    position: relative;
    cursor: pointer;

    scroll-snap-align: start;
    scroll-margin-top: 0.4rem;
}

/*
.selection-card[data-highlight="new"] {
    background-color: rgba(25, 166, 25, 0.75);
}
*/

.selection-card-image-clip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    overflow: hidden;
}

.selection-card-image-area {
    position: absolute;
    top: -7%;
    left: 0;
    right: 0;

    display: inline;
    height: 180%;
    width: auto;

    margin: 0 auto;
}

.selection-card-image-area>* {
    width: auto;
    height: auto;
    max-height: 100%;

    position: absolute;
    right: 50%;
    transform: translateX(50%);
    bottom: 0;
}

.selection-card-sidebar {
    position: absolute;

    right: 0;
    left: 75%;
    top: 0;
    bottom: 0%;

    padding: 2% 2.5%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.selection-card-sidebar img {
    width: 100%;
    height: auto;
    position: static;
}

.selection-card-sidebar .layer-icon {
    opacity: 0.80;
}

.selection-card-sidebar .gender-icon {
    opacity: 0.80;
    margin-top: 3%;
}

.selection-card-sidebar .status-icon {
    opacity: 0.50;
    margin-top: 3%;
}

.selection-card-sidebar .mode-icon {
    opacity: 0.50;
    margin-top: 3%;
}

.badge-sidebar {
    position: absolute;

    left: 0;
    top: 0;
    width: 35%;

    padding: 2% 2.5%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.badge-sidebar .badge-icon {
    opacity: 0.75;
    width: 100%;
    height: auto;
    position: static;
}

.selection-card-favorite-btn {
    background: none;
    border: none;
    padding: 0;
    padding-right: 0.3rem;
}

.selection-card-favorite-btn span {
    font-size: 3.5rem;
    color: #ffadbc;
}

/* For opponents that are favorited: */
.selection-card-favorite-btn.favorited .favorite-icon {
    display: inline;
}

.selection-card-favorite-btn.favorited .unfavorite-icon {
    display: none;
}

.selection-card-favorite-btn.favorited:hover .favorite-icon {
    display: none;
}

.selection-card-favorite-btn.favorited:hover .unfavorite-icon {
    display: inline;
}

/* For opponents not favorited: */
.selection-card-favorite-btn.not-favorited .favorite-icon {
    display: none;
}

.selection-card-favorite-btn.not-favorited .unfavorite-icon {
    display: inline;
}

.selection-card-favorite-btn.not-favorited:hover .favorite-icon {
    display: inline;
}

.selection-card-favorite-btn.not-favorited:hover .unfavorite-icon {
    display: none;
}

.selection-card-footer {
    position: absolute;
    bottom: 1%;
    left: 1%;
    right: 1%;
    /* top: 70%; */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.selection-card-footer .selection-card-label {
    border: 0.2rem solid #111111;
    border-radius: 0.5rem;
    background-color: #FFFFFF;
    opacity: 0.80;

    transition-property: opacity;
    transition-duration: 0.5s;

    text-align: center;
    padding: 1% 2%;
}

.selection-card-footer .selection-card-name {
    /*font-size: 110%;*/
    font-size: 1.6rem;
}

.selection-card-footer .selection-card-source {
    margin-top: 1%;
    /*font-size: 65%;*/
    font-size: 1.1rem;
}

.selection-card:hover,
.selection-card:active {
    background-color: rgba(221, 221, 221, 0.90);
    transition: background-color;
    transition-duration: 0.5s;
}

.selection-card[data-highlight=new] {
  background-image: url("../img/new-corner.svg");
  background-size: 38%;
  background-repeat: no-repeat;
  background-color: rgba(51, 74, 51, 0.65);
}
.selection-card[data-highlight="new"]>.badge-sidebar {
  top: 5%;
}
.selection-card[data-highlight="new"]:hover,
.selection-card[data-highlight="new"]:active {
    background-color: rgba(102, 255, 102, 0.50);
}

.selection-card[data-highlight=unsorted] {
  background-image: url("../img/new-corner.svg");
  background-size: 38%;
  background-repeat: no-repeat;
  background-color: rgba(51, 74, 51, 0.65);
}
.selection-card[data-highlight="unsorted"]>.badge-sidebar {
  top: 5%;
}
.selection-card[data-highlight="unsorted"]:hover,
.selection-card[data-highlight="unsorted"]:active {
    background-color: rgba(102, 255, 102, 0.50);
}

.selection-card[data-highlight=updated] {
  background-image: url("../img/updated-corner.svg");
  background-size: 38%;
  background-repeat: no-repeat;
  background-color: rgba(46, 66, 77, 0.65);
}
.selection-card[data-highlight="updated"]>.badge-sidebar {
  top: 5%;
}
.selection-card[data-highlight="updated"]:hover,
.selection-card[data-highlight="updated"]:active {
    background-color: rgba(92, 197, 250, 0.6);
}

.selection-card[data-highlight=unsorted-updated] {
  background-image: url("../img/updated-corner.svg");
  background-size: 38%;
  background-repeat: no-repeat;
  background-color: rgba(46, 66, 77, 0.65);
}
.selection-card[data-highlight="unsorted-updated"]>.badge-sidebar {
  top: 5%;
}
.selection-card[data-highlight="unsorted-updated"]:hover,
.selection-card[data-highlight="unsorted-updated"]:active {
    background-color: rgba(92, 197, 250, 0.6);
}

.selection-card[data-highlight="valentines"]:hover,
.selection-card[data-highlight="valentines"]:active {
    background-color: rgba(255, 103, 126, 0.6);
}


.selection-card:hover .selection-card-footer .selection-card-label,
.selection-card:active .selection-card-footer .selection-card-label {
    opacity: 1.0;

    transition-property: opacity;
    transition-duration: 0.5s;
}

.card-separator {
    border-top: 0.2rem solid gray;
    margin-top: 1rem;
    margin-bottom: 0.8rem;
    grid-column: 1 / -1;
    width: 99%;
}

.background-separator {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 99%;
}


/************************************************************
 * Classes for the sort / filter options row.
 ************************************************************/

.selection-options-row {
    position: absolute;
    top: 0;
    bottom: 90%;
    left: 0;
    right: 0;

    width: 75%;

    padding: 0.5% 1.5%;

    background-color: #555555;

    display: flex;
    align-items: center;
    flex-basis: 0;
}

.selection-options-row>* {
    margin-left: 1%;
}

.option-component {
    white-space: nowrap;
    margin: 0.5% 0;

    display: flex;
    justify-content: flex-start;
    align-items: stretch;
}

.option-component>label {
    border: 0.2rem solid #111111;
    border-radius: 0.5rem;
    text-align: center;

    background: linear-gradient(rgb(204, 204, 204), rgb(170, 170, 170)) rgb(204, 204, 204);
    margin-bottom: 0.5%;
    flex: 1;

    font-size: 1.5rem;
    line-height: 1.8rem;
    margin: 0;

    padding: 1% 1%;
}

.option-component>input {
    font-size: 1.8rem;
    line-height: 2.16rem;
    width: auto;
    height: auto;
    margin: 0;

    flex: 2;
    min-width: 0;
}

.column-component {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
}

.column-component label,
.column-component input {
    display: inline;
}

.gender-component>nav>ul {
    margin: 0;
    white-space: nowrap;

    display: inline-flex;
    justify-content: center;
}

.gender-component>nav>ul>li {
    flex: 1;
    display: inline-flex;
}

.gender-component>nav>ul a {
    margin: 0;
    position: static;
    float: none;
    padding: 0.4rem 0.8rem;
}

.sort-component {
    width: 95%;
    margin-bottom: 0;
}

.sort-component>button {
    margin-bottom: 0;
    margin-top: 0.5%;
    width: 100%;
    font-size: inherit;

    padding: 0.5% 0;
}

.sort-component>.dropdown-menu {
    width: 95%;
    margin-top: 5%;
}

.sort-component>.dropdown-menu>li {
    text-align: center;
    font-size: inherit;
}

.sort-component>.dropdown-menu>li>a {
    padding: 0.3rem 0.5%;
}

.select-back-btn {
    height: 100%;
    font-size: 140%;

    margin-left: 0;
    padding: 0.1rem 0.5em;
    flex: 1;
}

.smooth-button.select-back-btn:active,
.smooth-button.show-more-button:active,
.smooth-button.show-tags-button:active {
    padding-left: 0.55em;
    padding-right: 0.45em;
}

#gender-sort-column {
    flex: 3;
    align-items: center;
}

#source-tag-column {
    flex: 4;
}

#name-creator-column {
    flex: 4;
    flex-direction: column;
    justify-content: center;
}

#source-tag-column label,
#name-creator-column label {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

#source-tag-column input,
#name-creator-column input {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: 0px;
}

.option-component#name-component>label {
    width: auto;
}

.option-component#name-component>input {
    width: 100%;
}

/************************************************************
 * Classes for the select screen details view.
 ************************************************************/

.opponent-details-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 75.5%;
}

.opponent-details-image-area {
    position: absolute;
    left: 0;
    right: 0;
    top: -1.5%;
    bottom: 10%;

    z-index: -1;

    display: flex;
    justify-content: center;
}

.opponent-details-image-area>* {
    width: auto;
    height: 100%;

    position: absolute;
    right: 50%;
    transform: translateX(50%);
}

.opponent-details-image-area>* {
    width: auto;
    height: 100%;
}

.opponent-select-button {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.5%;
    top: 92.5%;
}

.opponent-details-simple-image {
    bottom: 0px;
}

.opponent-select-button>button {
    width: 100%;
    height: 100%;

    font-size: 140%;
}

.opponent-details-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8%;

    /*height: 35%;*/
    height: auto;
    /*min-height: 15%;*/
    max-height: 82%;
    overflow-y: auto;

    background-color: #555555;
    padding: 1.5%;
}

.opponent-details-view {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
}

.opponent-details-field {
    background-color: #FFFFFF;
    margin: 0.5% 0;

    font-size: 1.35rem;
    line-height: 1.6rem;

    display: flex;
    align-items: stretch;
    flex: 1;
}

.left-cap {
    border-top-left-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem;
}

.opponent-details-field>* {
    padding: 0.5% 2%;
    flex: 1;
    text-align: left;
    word-wrap: break-word;
}
.opponent-details-field>button.smooth-button:active:not(:disabled) {
    padding-left: calc(2% + 0.1em);
    padding-right: calc(2% - 0.1em);
}
.opponent-details-field>.opponent-details-label {
    background: linear-gradient(rgb(204, 204, 204), rgb(170, 170, 170)) rgb(204, 204, 204);
    height: auto;
    justify-content: center;
}

.opponent-details-field>.opponent-details-value {
    flex: 2.5;
}

.left-cap.opponent-details-field>.opponent-details-value {
    border-left: 0.2rem solid #111111;
}

.opponent-details-name {
    min-height: 17%;
    padding: 2% 0;
    display: block;
}

.opponent-full-name {
    margin-bottom: 0.75rem;
    font-size: 2.1rem;
    line-height: 1.2em;
    text-align: center;
}

.opponent-source {
    font-size: 1.4rem;
    line-height: 1.2em;
    text-align: center;
}

.opponent-details-name>div {
    padding: 0;
}

.opponent-details-description {
    min-height: 20%;
    padding: 1%;
    flex-grow: 1;

    font-size: 1.35rem;
    line-height: 1.6rem;
    flex: 3;

    display: block;
}

.opponent-details-description>* {
    display: inline;
    padding: 0;
    word-wrap: normal;
}

.opponent-details-field .opponent-nav-button {
    border-style: none;
}

.opponent-epilogues-field.has-epilogues,
.opponent-collectibles-field.has-collectibles {
    display: flex;
}

.opponent-options-row {
    margin: 0.5% 0;
    flex: 1;

    font-size: 1.6rem;
    line-height: 1.98rem;

    display: flex;
}

.opponent-options-row>* {
    margin: 0 0.5%;
}

.opponent-linecount-field {
    flex: 2;
}

.opponent-linecount-field>.opponent-details-label {
    flex: 2;
}

.opponent-linecount-field>.opponent-details-value {
    flex: 2;
}

.opponent-posecount-field {
    flex: 1;
}

#individual-select-screen .alt-costume-dropdown {
    flex: 3;
    padding: 0.5% 2%;
    height: auto;
    font-size: 1.6rem;
    line-height: 1.98rem;
}

.opponent-nav-button {
    flex: 1;
}

.show-more-button,
.show-tags-button {
    font-size: 0.7em;
    padding: 0 0.5em;
    white-space: nowrap;
}

.tag-list {
    list-style-type: none; /* Remove default list bullets */
    padding: 0;
    background-color: #F5F5F5;
}

.tag-item {
    margin-bottom: 0.2em;
    margin-left: 0.3em;
    padding: 0.2em;
    font-size: 1em
}


.show-more-button::after {
    content: "More";
}

.show-more .show-more-button::after {
    content: "Less";
}

.opponent-details-basic .extra-details-row {
    display: none;
}

.show-more .extra-details-row {
    display: flex;
}

.opponent-details-basic .opponent-details-description {
    display: block;
}

.opponent-epilogues-field:not(.has-epilogues),
.opponent-collectibles-field:not(.has-collectibles) {
    display: none;
}

.opponent-added-field:not(.has-added-date) {
    display: none;
}

.opponent-added-field .has-added-date {
    display: flex;
}

/* Modifications on non-widescreen devices
   Note: The threshold here must match autoResizeFont(). */
@media (max-aspect-ratio: 3/2) {
    .wide-screen-container {
        height: 75vw;
        max-width: 133.33vh;
    }

    .selection-cards-container {
	grid-template-columns: repeat(4, 25%);
    }

    .selection-cards-container,
    .selection-options-row {
        width: 70%;
    }

    .opponent-details-container {
        left: 70.5%;
    }

    .option-component label {
        font-size: 1rem;
    }

    .option-component input {
        font-size: 1.2rem;
    }

    #gender-sort-column {
        font-size: 1.1rem;
    }
}

/************************************************************
 * Classes for the opponent Epilogues and Collectibles views.
 ************************************************************/

.opponent-subview-card {
    padding: 1% 2%;
    margin: 2% 5%;
    background: #FFFFFF;

    display: flex;
    flex-direction: column;
}

.opponent-subview-title {
    flex: 2;

    text-align: left;
    font-size: 2rem;
}

.opponent-subview-row {
    margin: 1% 0;
    display: flex;

    flex: 1;
    word-wrap: break-word;
}

.opponent-subview-row>* {
    display: flex;
    align-items: center;

    padding: 0.5% 2%;

    flex: 1;
    word-wrap: break-word;
}

.opponent-subview-row>.opponent-subview-label {
    background: linear-gradient(rgb(204, 204, 204), rgb(170, 170, 170)) rgb(204, 204, 204);
    border-right: 0.2rem solid #111111;
    height: auto;
    justify-content: center;
    flex: 1;
}

.opponent-subview-row>.opponent-subview-value {
    flex: 3;
}

.opponent-subview-subtitle {
    font-size: 1.5rem;
}


/************************************************************
 * Classes for the old individual and group select screens.
 ************************************************************/

.long-select-advance-top {
    position: absolute;
    width: 36%;
    height: 16%;
    top: -16%;
    left: 32%;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #282828;
}

.long-select-advance-bottom {
    position: absolute;
    width: 36%;
    height: 16%;
    bottom: -16%;
    left: 32%;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #282828;
}

.stats-box {
    position: absolute;
    background: #F5F5F5;
    padding: 1rem;
    min-height: 17.6%;
}

.stats-box .stats-section,
.stats-box .stats-section-large {
    display: table;
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 1%;
}

.stats-box .stats-section-large {
    height: 3.6em;
}

.stats-box .stats-label {
    display: table-cell;
    position: relative;
    width: 25%;
    height: 100%;
    left: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: none;
    font-size: 88%;
    background: linear-gradient(#CCCCCC, #AAAAAA);
    background-color: #CCCCCC;
    vertical-align: baseline;
    text-align: right;
    padding: 0.1rem 0.3rem;
}

.stats-box .stats-content {
    display: table-cell;
    position: relative;
    width: 75.75%;
    height: 100%;
    right: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    font-size: 100%;
    background: #F5F5F5;
    vertical-align: baseline;
    padding: 0.1rem 0.3rem;
}

.character-description {
    text-align: center;
}

#group-select-area {
    position: absolute;
    left: 37.5%;
    bottom: 17%;
}

.group-preset-background-row {
    width: 100%;
    padding: 0.2rem 0.4rem;
    margin-top: 0.2rem;

    background: var(--dialogue-background-color);
    color: var(--dialogue-text-color);

    display: flex;
    align-items: center;
    justify-content: center;
}

#group-preset-background-label::before {
    content: "BG: ";
    font-weight: var(--medium-font-weight);
}

#group-preset-background-label {
    vertical-align: middle;
    font-weight: bold;
    margin-bottom: 0;
    margin-left: 0.5rem;
}

#group-enable-preset-backgrounds {
    margin: 0;
}

.group-dock-button-row {
    text-align: center;
    margin-bottom: 0.5rem;
}

.group-dock-button-row .hide-table-button,
.group-dock-button-row .table-bug-report-button {
    position: static;
    display: inline-block;

    width: 3rem;
    height: 3rem;
    line-height: 3rem;
}

.select-badge-bar {
    position: absolute;
    width: 33%;
    left: 0;
    top: 1.5%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.select-badge-bar .badge-icon {
    opacity: 0.7;
    pointer-events: auto;

    width: 100%;
    height: auto;
}

.status-icon {
    position: absolute;
    opacity: 0.60;
    width: 25%;
    right: 0;
    top: 18%;
    pointer-events: auto;
}

.status-icon:hover {
    opacity: 1.0;
}

.mode-icon {
    position: absolute;
    opacity: 0.60;
    width: 25%;
    right: 0;
    top: 28%;
    pointer-events: auto;
}

.mode-icon:hover {
    opacity: 1.0;
}

.layer-icon {
    position: absolute;
    width: 19%;
    right: 0;
    top: 2%;
    opacity: 80%;
}

.gender-icon {
    position: absolute;
    width: 19%;
    right: 0;
    top: 10%;
    filter: drop-shadow(0.5rem 0.5rem 0.5rem #222);
    opacity: 80%;
}

.wrap-text {
    overflow-wrap: anywhere;
}

.alt-costume-dropdown {
    background-color: rgb(243, 184, 232);
    border-color: rgb(158, 48, 175);
    padding: 0.125em;
}

.opponent-image-area .alt-costume-dropdown {
    position: absolute;
    left: 50%;
    top: 48%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}

.character-setting-select {
    background-color: #F7E594;
    border-color: #786F48;
    padding: 0.125em;
}

/************************************************************
 * Classes for the selection area on the selection screen.
 ************************************************************/

.select-page-display {
    display: table;
    position: absolute;
    width: 30%;
    height: 45%;
    bottom: 55%;
    left: 35%;
    text-align: center;
    font-size: 130%;
}

.select-page-display .page-label {
    display: table-cell;
    position: absolute;
    width: 35%;
    height: 100%;
    left: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-top: 2%;
    background: linear-gradient(#888888, #666666);
    background-color: #888888;
}

.select-page-display .page-indicator {
    display: table-cell;
    position: absolute;
    width: 32%;
    height: 100%;
    left: 34%;
    text-align: center;
    border-radius: 0;
    font-size: 120%;
}

.select-page-display .of-label {
    display: table-cell;
    position: absolute;
    width: 35%;
    height: 100%;
    right: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-top: 2%;
    background: linear-gradient(#888888, #666666);
    background-color: #888888;
}

.select-page-selection {
    display: table;
    position: absolute;
    width: 30%;
    height: 40%;
    bottom: 3%;
    left: 35%;
    text-align: center;
    font-size: 130%;
}

.select-page-selection .first-page-button {
    display: table-cell;
    position: absolute;
    width: 20%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.select-page-selection .left-page-button {
    display: table-cell;
    position: absolute;
    width: 20%;
    height: 100%;
    left: 19%;
    bottom: 0;
    border-radius: 0;
}

.select-page-selection .go-page-button {
    display: table-cell;
    position: absolute;
    width: 24%;
    height: 100%;
    left: 38%;
    bottom: 0;
    border-radius: 0;
}

.select-page-selection .right-page-button {
    display: table-cell;
    position: absolute;
    width: 20%;
    height: 100%;
    right: 19%;
    bottom: 0;
    border-radius: 0;
}

.select-page-selection .last-page-button {
    display: table-cell;
    position: absolute;
    width: 20%;
    height: 100%;
    right: 0;
    bottom: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/************************************************************
 * Classes for the table on the main game screen.
 ************************************************************/

.game-table-surface {
    width: 100%;
    padding: 0.5rem;
    background: radial-gradient(#007000, #006000, #005000);
    background-color: #006000;
    box-sizing: border-box;
    border: 0.2rem solid black;
    border-radius: 0.8rem;
}

.game-table-surface-glass {
    background: rgba(255, 255, 255, 0.1);
}

.game-table-surface-none {
    background: rgba(255, 255, 255, 0.0);
    border: 0 solid black;
}

.game-table-area {
    width: 100%;
    margin-bottom: 0.5rem;
    table-layout: fixed;
}

.opponent-area {
    position: absolute;
    width: 22rem;
    bottom: 19%;
    margin: 0 1.5rem;
    padding: 0.2rem;
    background-color: rgba(40, 40, 40, 0.75);
}

#game-hidden-area>.opponent-area {
    background-color: transparent;
    top: 69%;
    bottom: auto;
}

#group-select-table .alt-costume-dropdown {
    position: absolute;
    width: 22rem;
    margin: 0 1.5rem;
    bottom: 38%;
}

.opponent-area .name-label,
.opponent-area .alt-costume-dropdown,
.opponent-area .character-setting-select {
    margin-bottom: 0.2rem;
    width: 100%;
}

.opponent-card-area {
    display: flex;
    justify-content: space-between;
}

.small-card-image {
    height: calc(4.1rem * 7/5);
    width: 4.1rem;
    background-color: white;
}

/************************************************************
 * Classes for the human player section of the table on the
 * main game screen.
 ************************************************************/

.legacy-ui .small-clothing-image-container {
    width: 28%;
    height: 47%;
    margin-bottom: 3.5%;
}

.clothing-float-right {
    float: right;
    margin-left: 3.5%;
}

.clothing-float-left {
    float: left;
    margin-right: 3.5%;
}

.player-area {
    width: 100%;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
}

@keyframes pulse {
    from {
        transform: none
    }

    to {
        transform: scale(1.2);
        background-color: rgb(255, 235, 235, 1.0);
    }
}

#player-countdown {
    position: absolute;
    width: 4%;
    height: 4%;
    left: 48%;
    bottom: 12.5%;
    text-align: center;
    font-size: 120%;
    background-color: rgba(240, 240, 240, 1.0);
}

.pulse {
    animation: 0.4s infinite alternate pulse;
}

@keyframes overlay-pulse {
    from {
        opacity: 0.25;
    }
    to {
        opacity: 1;
    }
}
@keyframes overlay-climax {
    from {
        background-color: transparent;
    }
    13.3%, 20% {
        background-color: white;
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

#game-climax-overlay {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: 1049;
    background: radial-gradient(closest-corner, transparent 60%, rgba(255, 255, 255, 0.3));
    animation: 0.4s infinite alternate overlay-pulse;
}
#game-climax-overlay.intense {
    background: radial-gradient(closest-corner, transparent 50%, rgba(255, 255, 255, 0.4));
    animation: 0.3333s infinite alternate overlay-pulse;
}
#game-climax-overlay.climax {
    animation: 0.3333s infinite alternate overlay-pulse, 3s overlay-climax;
}

#player-game-clothing-area {
    position: absolute;
    width: 33%;
    height: 15%;
    left: 9%;
    bottom: 1%;
    background-color: rgba(40, 40, 40, 0.75);
}

.player-clothing-container {
    position: absolute;
    width: 55%;
    height: 100%;
    padding: 1.25%;
}

.player-card-area {
    position: absolute;
    /*width: 40.3rem;
    height: 11.2rem;*/
    right: 1.5%;
    bottom: 1%;
    padding: 0.45%;
    background-color: rgba(40, 40, 40, 0.75);
    display: flex;
}

.name-label {
    text-align: center;
    background-color: var(--dialogue-background-color);
    color: var(--dialogue-text-color);
    padding: 0.125em;
}

.game-name-label-0 {
    display: none;
}

#player-game-clothing-area .game-name-label-0 {
    display: block;
    position: absolute;
    width: 65.5%;
    height: 24%;
    left: 17.25%;
    bottom: 3%;
}

#game-clothing-label {
    position: absolute;
    width: 65.5%;
    height: 22%;
    left: 17.25%;
    bottom: 28%;
    font-size: 90%;
    text-align: center;
    background-color: var(--dialogue-background-color);
    color: var(--dialogue-text-color);
}

.large-card-image,
.ui-minimal.prompt-exchange .large-card-image,
#deck {
    height: 10rem;
    width: calc(10rem * (5 / 7));
    border-radius: 0.65rem;
    border-width: 0.2rem;
    background-color: white;
}

.large-card-image.tradein {
    opacity: 0.4;
}

.large-card-image+.large-card-image {
    margin-left: 0.4rem;
}

.dock-card {
    position: absolute;
    left: 46.25%;
    bottom: 2.2%;
}

#main-game-button {
    position: absolute;
    width: 12%;
    height: 8%;
    left: 50%;
    bottom: 5%;
    font-size: 140%;
    transform: translate(-50%, 0%);
    overflow: hidden;
}

#auto-advance-slower-button {
    position: absolute;
    width: 3%;
    left: 50%;
    bottom: 1%;
}
#auto-advance-faster-button {
    position: absolute;
    width: 3%;
    left: 53%;
    bottom: 1%;
}

#auto-advance-button-container {
    position: absolute;
    bottom: 1%;
    left: 44%;
    width: 12%;
    display: flex;
    justify-content: space-between;
    gap: 0.2rem;
}
#auto-advance-button-container>button {
    height: 1.9em;
    flex: 1;
    line-height: 0.9em;
}
#auto-advance-button-container>button>img {
    height: 0.9em;
}

#auto-advance-progress-bar {
    position: absolute;
    height: 100%;
    top: 0;
    width: 0;
    left: 0;
    z-index: -1;
    /* This isn't perfect, but considerably simpler than setting new
       gradients for base, hover and disabled */
    background-color: #fbc69f;
    opacity: 25%;
}

#player-masturbation-timer-box {
    width: 10%;
}

/* remove the "clear" button that occurs in some MS browsers */
#player-masturbation-timer-box::-ms-clear {
    display: none;
}

.text-option-container {
    display: flex;
}

.text-option-container .ui-text-option {
    width: 20rem;
    margin-right: 5rem;
}

.text-option-sample {
    font-size: 1.75rem;
    width: 15rem;
}

.text-option-label {
    margin-left: auto;
    margin-right: 0.5rem;
    font-size: 1.75rem;
    width: 5rem;
}

#text-width-label::after {
    content: "%";
}

/***********************************************************
 * Classes for the Minimalist UI.
 ***********************************************************/

.ui-minimal .opponent-area {
    background: none;
    text-align: center;

    bottom: auto;
    top: 70%;
    opacity: 0.5;

    transition-property: opacity;
    transition-duration: 0.5s;
}

.ui-minimal .opponent-area.revealed-cards {
    opacity: 0.75;
    transition-property: opacity;
    transition-duration: 0.25s;
}

.ui-minimal .opponent-area:hover,
.ui-minimal .opponent-area:active {
    opacity: 1.0;
    transition-property: opacity;
    transition-duration: 0.25s;
}

.ui-minimal .opponent-area.current {
    opacity: 1.0;
    transition: none;
}

.ui-minimal .opponent-area.revealed-cards:hover,
.ui-minimal .opponent-area.revealed-cards:active,
.ui-minimal .opponent-area.loser {
    opacity: 1.0;
    transition-property: opacity;
    transition-duration: 0.25s;
}

.ui-minimal .opponent-card-area {
    background: none;
    display: flex;
    justify-content: center;
    margin-top: 0.2rem;
}

.ui-minimal .small-card-image {
    height: 4rem;
    width: calc(4rem * (5 / 7));
    border-width: 0.15rem;
    border-radius: 0.4rem;
}

.ui-minimal .opponent-area .small-card-image {
    margin: 0.05rem;
    margin-right: -2.45rem;
    transform: translateX(-1.3rem);
}

.ui-minimal .revealed-cards .small-card-image {
    margin-right: 0.05rem;
    transform: none;

    transition-property: margin-right, transform;
    transition-duration: 0.5s;
}

.ui-minimal .opponent-area.loser .small-card-image,
.ui-minimal .opponent-area.tied .small-card-image,
.ui-minimal .opponent-area.revealed-cards:hover .small-card-image,
.ui-minimal .opponent-area.revealed-cards:active .small-card-image {
    height: 5.5rem;
    width: calc(5.5rem * (5 / 7));
    transition-property: width, height;
    transition-duration: 0.25s;
}

.ui-minimal .opponent-area .name-label {
    text-align: left;
    display: inline;
    padding: 1% 5%;
    white-space: nowrap;
}

.ui-minimal #player-game-card-area {
    background: none;
    left: 57%;
    bottom: 1%;
    padding: 0;

    justify-content: center;
    align-items: flex-end;

    transition-property: opacity;
    transition-delay: 1s;
    transition-duration: 0.5s;

    transform-style: preserve-3d;
    transform-origin: 35% bottom; /* Intentionally not using bottom center because the cards are to the right. */
    transform: perspective(20em);
    pointer-events: none;
}

.ui-minimal .large-card-image {
    height: 5.5rem;
    width: calc(5.5rem * (5 / 7));
    margin: 0 0.1rem;
    border-width: 0.15rem;
    border-radius: 0.4rem;
}

.ui-minimal #player-game-card-area .large-card-image
{
    filter: none;
    opacity: 0.5;
    transition-property: width, height, margin, border-radius, border-width, opacity;
    transition-duration: 0.5s;
    transition-delay: 1s;
    transform-origin: bottom;
}

.ui-minimal #player-game-card-area .large-card-image:not([disabled]) {
    /* Make sure that cards are animated without delay when (de)selecting them using the keyboard.
       Note that we don't want transform and filter to be transitioned when the player hitss Swap and
       the replacement cards are to be animated.
       Unfortunately we need to repeat the other properties as well. */
    transition-property: width, height, margin, border-radius, border-width, opacity, transform, filter;
    transition-duration:  0.5s,   0.5s,   0.5s,          0.5s,         0.5s,    0.5s,     0.25s,  0.25s;
    transition-delay:       1s,     1s,     1s,            1s,           1s,      1s,        0s,     0s;
}

.ui-minimal #player-game-card-area:hover .large-card-image,
.ui-minimal.prompt-exchange #player-game-card-area .large-card-image {
    height: 10rem;
    width: calc(10rem * (5 / 7));
    border-radius: 0.65rem;
    border-width: 0.2rem;
    margin: 0 0.2rem;
    opacity: 1.0;
    /* Quicker animation when hovering over the cards and when it becomes the player's turn. */
    transition-duration: 0.25s;
    transition-delay: 0s;
}
.ui-minimal #player-game-card-area .large-card-image.tradein {
    filter: opacity(0.75) contrast(0.75);
    transform: translateY(-25%) translateZ(-0.5em);
}

.table-feedback-report-button, .table-hard-refresh-button {
    display: none;
}

.ui-minimal .table-feedback-report-button, .ui-minimal .table-hard-refresh-button {
    display: inline;
}

#player-game-clothing-area-minimal {
    display: none;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    flex-basis: 0;

    position: absolute;

    right: 57%;
    bottom: 1%;

    width: 33%;
    transform: none;

    transition-property: height, transform;
    transition-duration: 0.5s;
}

.minimal-clothing-area-row {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    opacity: 0.33;
    transform: none;

    transition-property: opacity, transform;
    transition-duration: 0.5s;
}

.minimal-clothing-area-row:first-child {
    margin-bottom: 0.5%;
}

#player-game-clothing-area-minimal:hover .minimal-clothing-area-row,
#player-game-clothing-area-minimal:active .minimal-clothing-area-row {
    opacity: 1.0;
    transition-property: opacity;
    transition-duration: 0.25s;
}


.player-lost .minimal-clothing-area-row {
    opacity: 1.0;
    transform: translateY(30%);
    transition-property: opacity, transform;
    transition-duration: 0.5s;
}

.small-clothing-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.ui-minimal .small-clothing-image-container {
    width: 4.25rem;
    height: 4.25rem;
    margin-left: 1%;
    transform: none;

    transition-property: width;
    transition-duration: 0.5s;
}

.ui-minimal .player-lost .small-clothing-image-container {
    width: 6.5rem;
    height: 6.5rem;

    transition-property: width;
    transition-duration: 0.5s;
}

.small-clothing-image {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
}

.ui-minimal #player-game-clothing-area {
    display: none;
}

.ui-minimal #player-game-clothing-area-minimal {
    display: inline-flex;
}

.ui-minimal .game-name-label-0 {
    display: block;
    bottom: 1%;
    position: absolute;
    left: 50%;
    min-width: 12%;
    transform: translateX(-50%);
}

.optional-bordered {
    border: 0.2rem solid #111111;
    border-radius: 0.5rem;
}

.ui-minimal .optional-bordered {
    border: none;
}

/************************************************************
 * Classes for name labels to indicate current player, loser, etc.
 ************************************************************/
.name-label.loser, .opponent-area.loser .name-label, #player-game-clothing-area.loser .name-label {
    background-color: var(--loser-label-color);
}

.name-label.tied, .opponent-area.tied .name-label, #player-game-clothing-area.tied .name-label {
    background-color: var(--tied-label-color);
}

.name-label.current, .opponent-area.current .name-label, #player-game-clothing-area.current .name-label {
    background-color: var(--current-label-color);
}

/************************************************************
 * Classes for the Epilogue screens.
 ************************************************************/

#epilogue-screen {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #000;
    text-align: center;
}

#epilogue-container {
    width: 100%;
    height: 100%;
    font-size: 1.05em;
}

.epilogue-content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
}

.epilogue-content>.epilogue-background {
    height: 100%;
}

.epilogue-text {
    border: 0.2rem solid #171717;
    position: absolute;
    background: #F5F5F5;

}

.epilogue-content .dialogue-bubble {
    padding: 0.9rem;
    margin: 0;
    font-size: 103%;
    border-radius: 0.7rem;
}

.epilogue-content>.epilogue-image>img {
    width: 100%;
}

#epilogue-buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10001;
    width: 100%;
    height: 2.3em;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.2s;
    font-size: 30px; /* default; overridden by resizeViewport() */
}
#epilogue-buttons>div {
    position: absolute;
    bottom: 0;
}
#epilogue-buttons>div:first-child {
    left: 0.75em;
}
#epilogue-buttons>div:last-child {
    right: 0.75em;
}
#epilogue-buttons.show, #epilogue-buttons.force-show, #epilogue-buttons.debug-active {
    opacity: 1;
}
#epilogue-buttons>div>* {
    display: inline-block;
    padding: 0.3em;
    border: 0 none;
    vertical-align: middle;
    background: transparent;
    color: #aaa;
    transition-property: color;
    transition-duration: 0.5s;
}
#epilogue-buttons>div>.debug {
    display: none;
}
#epilogue-buttons.debug-active>div>.debug,
#epilogue-buttons.nav-active>div>.nav {
    display: inline-block;
}
#epilogue-buttons button:hover:enabled {
    color: #fff;
}
#epilogue-buttons select {
    display: inline-block;
    font-size: 0.8em;
}

#epilogue-buttons button:disabled {
    opacity: 0.4;
}

.modal-footer-button-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0 5%;
}

.modal-footer-button-row::before,
.modal-footer-button-row::after {
    clear: none;
    content: none;
}

.table-modal .modal-button.epilogue-modal-button {
    height: auto;
}

#epilogue-modal .modal-body-container {
    overflow-y: auto;
    max-height: 40rem;
}

#epilogue-modal .modal-header hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid #333;
    width: 25%;
}

#epilogue-header-tip {
    font-style: italic;
    font-size: 105%;
}

#epilogue-header-tip::before {
    content: "Tip: ";
}

#epilogue-list {
    list-style: none;
    text-align: centred;
    padding-left: 0;
}

.epilogue-entry {
    padding: 0.2rem 0.5rem;
}

.epilogue-entry button {
    color: black;
    background: #BBBBBB;
    border: 0.2rem solid black;
    border-radius: 0.5rem;
    padding: 0.2rem 0.5rem;
    text-decoration: none;
}

.epilogue-entry.active button {
    background-color: #439AD7;
    border-color: white;
}

.epilogue-entry button:hover {
    background: #DDDDDD;
}

.epilogue-entry .epilogue-description {
    font-style: italic;
}

.epilogue-entry .epilogue-description::before {
    content: "Info: ";
}

.epilogue-entry.unavailable {
    margin: 0.1rem 0;
}

.epilogue-entry.unavailable .epilogue-title {
    text-decoration: line-through;
}

.epilogue-entry.unavailable button::after {
    content: " (Unavailable)";
}

.epilogue-entry.unlocked button::after {
    color: darkgreen;
    content: "\2714";
}

.epilogue-entry.unavailable .epilogue-hint {
    font-style: italic;
}

.epilogue-entry.unavailable .epilogue-hint::before {
    content: "Hint: ";
}

.epilogue-viewport {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.epilogue-canvas {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.epilogue-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
}

.particle {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 100%;
    width: 10px;
    height: 10px;
}

.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -1.1rem -5rem;
    width: 10rem;
    height: 2.2rem;
    text-align: center;
    font-size: 180%;
    color: white;
}

.spinner-pip {
    width: 1.8rem;
    height: 1.8rem;
    background-color: #CCC;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: ep-bouncedelay 1.4s infinite ease-in-out both;
    animation: ep-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner>.spinner-pip:nth-child(1) {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner>.spinner-pip:nth-child(2) {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes ep-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes ep-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

/************************************************************
 * Classes for the Gallery screens.
 ************************************************************/

.gallery-select-block {
    position: absolute;
    display: flex;
    align-items: center;

    /* width: 30rem; */
    height: 10%;
    top: 8%;
}

.gallery-select-button {
    height: 100%;
    font-size: 140%;
}

.gallery-back-button {
    height: 100%;
    width: 7.5rem;
}

.gallery-switch-button {
    width: 14rem;
    margin-left: 1rem;
}

.gallery-character-filter {
    width: 20rem;
    height: 60%;
    margin-left: 1rem;

    font-size: 110%;
}

.gallery-pane {
    position: absolute;
    top: 20%;
    height: 75%;
    width: 32%;
}

.pane-content {
    margin-left: 3%;
}

.gallery-list-pane {
    left: 0;
    background-color: rgba(200, 200, 200, 75%);
    overflow-y: auto;
}

.gallery-pane-list-item {
    background-color: rgb(90, 90, 90);
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 2.5%;
    width: 95%;
    position: relative;
    min-height: 6.9rem;
}

.gallery-pane-list-item:hover {
    background-color: rgb(150, 150, 150);
}

.gallery-pane-item-icon {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 5.5rem;
    height: 5.5rem;
    object-fit: contain;
}

.gallery-pane-item-title {
    font-size: 105%;
    margin-left: 6.8rem;
    margin-top: 0.3rem;
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gallery-pane-item-subtitle {
    font-size: 82%;
    margin-left: 6.8rem;
    margin-top: 0.3rem;
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;
}

/************************************************************
 * Classes for the Collectibles Gallery.
 ************************************************************/

#collectibles-list-pane {
    left: 0;
    background-color: rgba(200, 200, 200, 75%);
    overflow-y: auto;
}

#collectibles-text-pane {
    left: 34%;
    background-color: rgba(255, 255, 255, 85%);
    overflow-y: auto;
}

#collectibles-image-pane {
    left: 68%;
    background-color: rgba(60, 60, 60, 75%);
}

.collectible-content {
    margin-left: 2.5%;
    margin-right: 2.5%;
}

.collectible-subtitle-container {
    margin-top: 1rem;
}

.collectible-unlock-container>div {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

#collectible-gallery-screen hr {
    width: 85%;
}

#collectible-title {
    margin-bottom: 1rem;
}

#collectible-progress {
    margin-left: 5%;
    margin-right: 5%;
}

#collectible-progress-bar {
    background: linear-gradient(#0088CC, #0066AA);
}

#collectible-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);

    max-width: 95%;
    max-height: 95%;
    width: auto;
    height: auto;

}

.collectibles-modal-dialog {
    width: 60%;
}

.collectibles-modal-dialog .modal-dialog-surface {
    background-color: rgba(255, 255, 255, 85%);
}

#collectible-info-container {
    display: flex;
    justify-content: center;
    align-items: center;

    padding-left: 1.5em;
    padding-right: 1.5em;
}

#collectible-info-thumbnail {
    height: 6em;
}

.collectible-info-text {
    margin-left: 2em;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

#collectible-info-title {
    margin-top: 0.1em;
    margin-bottom: 0.2em;
    font-size: 2em;
    font-weight: var(--medium-font-weight);
    line-height: 1.1;
    text-align: left;
}

#collectible-info-subtitle {
    margin-bottom: 0.1em;
    text-align: left;
}

#collectibles-info-modal .modal-thin-padding {
    padding-top: 0.5%;
    padding-bottom: 0.5%;
}

/************************************************************
 * Classes for the Card Decks Gallery.
 ************************************************************/

 #deck-customizer-pane {
    left: 34%;
    right: 0;
    width: auto;
    background-color: rgba(255, 255, 255, 85%);
    overflow-y: auto;
}

#deck-title {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

#deck-subtitle {
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: normal;
    line-height: 1;
    color: #777;
}

#deck-credits {
    font-style: italic;
    font-size: 2rem;
}

#deck-credits::before {
    font-style: normal;
    content: "Credit: ";
}

.deck-text-container > h3 {
    margin-top: 10px;
    font-size: 2rem;
}

#deck-description {
    margin: 0 5%;
    font-size: 1.6rem;
}

#deck-status-alert {
    display: none;
}

#deck-status-alert.locked {
    display: block;
    color: firebrick;
}

#deck-status-alert.loading {
    display: block;
    color: #777;
}

.deck-activation-btn {
    font-size: 1.75rem;
    margin: 2rem 1rem 0 1rem;
    padding: 0.5rem 2rem;
}

.deck-activation-btn:active:not(:disabled) {
    padding: 0.5rem 2rem;
}

.deck-cards-container {
    padding-bottom: 2.5rem;
}

.deck-rank-container {
    margin: 0 2.5%;
}

.rank-title-container {
    display: flex;
    align-items: center;

    width: 100%;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.deck-rank-title {
    font-size: 2rem;
    margin-right: auto;
}

.rank-activate-btn {
    margin-left: 2rem;
}

.rank-activation-btn {
    font-size: 1.75rem;
    padding: 0.25rem 2rem;
}

.rank-activation-btn:active:not(:disabled) {
    padding: 0.25rem 2rem;
}

.deck-rank-title::after {
    content: ":";
}

.rank-cards-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.custom-deck-image {
    height: 10rem;
    width: calc(10rem * (5 / 7));
    border-radius: 0.65rem;
    border-width: 0.2rem;
    background-color: white;

    opacity: 0.4;
    transition-property: opacity;
    transition-duration: 0.25s;

    filter: blur(0.15rem);
}

.custom-deck-image.usable {
    filter: none;
    cursor: pointer;
}

.custom-deck-image.usable:hover {
    opacity: 0.8;
}

.custom-deck-image.usable.selected {
    opacity: 1.0;
}

.deck-list-item {
    background-color: rgb(120, 120, 120);
    padding: 0 0.5rem;
}

.deck-list-item > .gallery-pane-item-title {
    font-size: 1.65rem;
    margin-left: 0.3rem;
}

.deck-list-item > .gallery-pane-item-subtitle {
    font-size: 1.4rem;
    margin-left: 0.3rem;
}

/************************************************************
 * Classes for the Epilogues Gallery.
 ************************************************************/

#gallery-gender-block {
    position: absolute;
    width: 30%;
    right: 25%;
    top: 8%;
}

.gallery-gender-button {
    width: 23%;
    height: 100%;
    background: #F0F0F0;
}

#gallery-endings-block {
    position: absolute;
    top: 20%;
    display: flex;
    width: 80%;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 62%;
}

.gallery-ending {
    width: 18%;
    border: 0.3rem solid #dedede;
    border-radius: 2%;
    height: 23%;
    margin-right: 0.5%;
    margin-bottom: 2%;
    background-size: auto 100%;
    background-position: 50%;
    cursor: pointer;
    opacity: 0.8;
}

.gallery-ending:hover {
    opacity: 1;
}

.empty-thumbnail {
    border: none;
    pointer-events: none;
}

.unlocked-thumbnail {
    background-image: url("../img/unknown.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 70% auto;
    background-color: #000;
    opacity: 1;
}

.unlocked-thumbnail:hover {
    background-color: #333;
}

#selected-ending-previev.unlocked-thumbnail {
    background-color: #000;
    background-size: 60% auto;
}

#gallery-controls-block {
    position: absolute;
    width: 90%;
    height: 12%;
    bottom: 3%;
}

#gallery-selected-ending-block {
    position: absolute;
    top: 20%;
    right: 0;
    width: 25%;
    height: 65%;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 0.8rem;
    border-width: thin;
    border-style: solid;
}

#gallery-selected-ending-block>label {
    margin-left: 0.25em;
}

#selected-ending-previev {
    height: 35%;
    width: 100%;
    background-size: auto 100%;
    background-position: 50% 50%;
    margin-bottom: 3%;
    border-radius: 0.8rem;
    background-color: rgba(0, 0, 0, 0.6);
}

#gallery-selected-ending-block label {
    text-shadow: 0px 0px 2px #aaa;
}

#gallery-prev-page-button {
    left: 30%;
}

#gallery-next-page-button {
    left: 40%;
}

#gallery-start-ending-button {
    left: 72.3%;
}

.female-style {
    color: #f0869b;
    text-shadow: none;
}

.male-style {
    color: #7ba1e4;
    text-shadow: none;
}

/************************************************************
 * Debug stuff
 ************************************************************/

.debug-button,
.dev-select-button,
.character-debug-button {
    position: absolute;
    width: 3em;
    height: 2em;
    background-color: #F5F5F5;
}

.opponent-area .debug-button,
.opponent-area .dev-select-button,
.opponent-area .character-debug-button {
    top: -2.25em;
}

.opponent-area .debug-button {
    right: 0;
}

#debug-button-0 {
    left: 1.5%;
    bottom: 14%;
}

.debug-button.active {
    background: linear-gradient(#BB3333, #9F1616);
    background-color: #BB3333;
}

.collectible-button-container {
    position: absolute;
    width: 22rem;
    top: 65%;
    margin: 0 1.5rem;
}

.collectible-button {
    width: 4.5rem;
    height: 3rem;
    padding: 0.1rem;
    position: absolute;
    animation: 2.5s ease-in-out 0s infinite alternate flash-collectible-button;
}

@keyframes flash-collectible-button {
    from {
        background-color: #9F1616
    }

    to {
        background-color: #F88888
    }
}

.collectible-button:hover {
    background: linear-gradient(#F88888, #BB3333);
    background-color: #F66666;
    animation: none;
}

.collectible-button img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: baseline;
}

/************************************************************
 * Global override classes.
 ************************************************************/

.clear {
    background: transparent;
}

.tight {
    width: auto;
}

.never-hide {
    visibility: visible;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}


/************************************************************
 * UX
 ************************************************************/

.title-candy,
#main-title-container,
.player-card-area,
.player-card-area input,
.opponent-card-area,
.opponent-image-area,
.player-clothing-container,
.minimal-clothing-area-row,
.epilogue-overlay,
.epilogue-viewport {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.focus-indicators-enabled a:focus,
.focus-indicators-enabled input[type=image]:focus,
.focus-indicators-enabled select:focus,
.focus-indicators-enabled button:focus,
.focus-indicators-enabled .selection-card:focus
{
    outline: 0.18rem dotted white;
}
.focus-indicators-enabled select:focus:not(.nav),
.focus-indicators-enabled input[type=image]:not(.locked):focus,
.focus-indicators-enabled button.title-content-button:not(.locked):focus,
.focus-indicators-enabled button.player-clothing-select:not(.locked):focus
{
    outline-color: black;
}
.focus-indicators-enabled input[type=image]:focus,
.focus-indicators-enabled button:focus,
.focus-indicators-enabled select:focus,
.focus-indicators-enabled .selection-card:focus
{
    outline-offset: -0.4rem;
}
:focus {
    outline: none;
}

/************************************************************
 * Custom poses
 ************************************************************/
.sprite
{
    vertical-align: top; /*overrides bootstrap*/
}